<template>
  <div class="login_container">
    <div class="login_form">
      <div class="login_label">{{ sysTitle }}</div>
      <!-- 表单 -->
      <el-form
        ref="loginFormRef"
        style="width: 100%"
        :model="loginForm"
        :rules="rules"
        size="large"
        @keyup.enter="login"
      >
        <el-form-item prop="loginName">
          <el-input
            prefix-icon="User"
            v-model="loginForm.loginName"
            placeholder="请输入用户名"
            clearable
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="Lock"
            v-model="loginForm.password"
            placeholder="请输入密码"
            type="password"
            show-password
            clearable
          />
        </el-form-item>
        <el-form-item prop="checkCode">
          <div class="login_code">
            <el-input
              prefix-icon="CircleCheck"
              v-model="loginForm.checkCode"
              placeholder="请输入验证码"
              clearable
            />
            <img class="login_code_img" :src="codeUrl" @click="getCode" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%; margin-top: 16px"
            @click="login"
            v-loading="loading"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useUserStore } from '@/stores/modeles/user'
import router from '@/router'
import { getUUID } from '@/utils/index.js'
import { checkCode } from '@/api/user.js'
import { encryptByAES, decryptByAES } from '@/utils/CriptoJS'

const userStore = useUserStore()
const loginFormRef = ref()
const loginForm = reactive({
  loginName: '',
  password: '',
  checkCode: '',
  uid: '',
})

const loading = ref(false)
const rules = reactive({
  loginName: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
  checkCode: [{ required: true, message: '请填写验证码', trigger: 'blur' }],
})
const sysTitle = ref('')
const codeUrl = ref()
onMounted(() => {
  sysTitle.value = COMMON_COJNFIG.SYS_TITLE
  getCode()
})

//获取后台验证码
const getCode = () => {
  loginForm.uid = getUUID() //前端获取uuid随机数,登录时传回去
  checkCode({ uid: loginForm.uid }).then((res) => {
    //图片流转化
    const blob = new Blob([res], { type: 'image/jpeg' })
    codeUrl.value = URL.createObjectURL(blob)
  })
}
//登录
const login = () => {
  loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      let logdata = JSON.parse(JSON.stringify(loginForm))
      const secretKey = 'EtBzqj+ln5tSTof1SDhpTg=='
      const cipherText = encryptByAES(logdata.password, secretKey) //加密
      logdata.password = cipherText
      loading.value = true
      setTimeout(() => {
        userStore
          .login(logdata)
          .then((res) => {
            loading.value = false
            router.push({ path: '/' })
          })
          .catch((err) => {
            getCode()
            loading.value = false
          })
      }, 300)
    }
  })
}
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100%;
  background-color: var(--sys-bg-color);
  background-image: url('@/assets/login/vueloginbac.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;

  .login_form {
    width: 400px;
    height: 420px;
    position: absolute;
    right: 72px;
    top: calc(50% - 200px);
    background-color: var(--sys-bg-color);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
    gap: 16px;

    .login_label {
      font-size: 24px;
      font-weight: 700;
      color: #333;
    }

    .login_code {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      :deep(.el-input) {
        width: 65%;
      }
      .login_code_img {
        width: calc(35% - 8px);
        height: 100%;
        cursor: pointer;
      }
    }

    .login_btn {
      width: 100%;
    }
  }
}
</style>